<template>
  <div>
    <ul>
      <li v-for="v in list">
        <img v-bind:src="v.src" alt="">
        <h4>{{v.des}}</h4>
        <p>{{v.price}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
      data:{
        return:{
          list:[
            {
              src:'images/1.jpg',
              des:'这是第一个描述',
              price:198
            },
            {
              src:'images/2.jpg',
              des:'这是第二个描述',
              price:198
            },
            {
              src:'images/3.jpg',
              des:'这是第三个描述',
              price:211
            },
            {
              src:'images/1.jpg',
              des:'这是第一个描述',
              price:198
            },
            {
              src:'images/3.jpg',
              des:'这是第二个描述',
              price:112
            },
            {
              src:'images/3.jpg',
              des:'这是第三个描述',
              price:423
            }
          ]
        }
      }
  }


</script>

<style scoped>

  #box ul{
    display: flex;
    flex-wrap: wrap;
  }
  #box li{
    padding: 3px;
    list-style: none;
    margin-right: 15px;
    border: 1px solid #eee;
  }
  #box img{
    width: 200px;
    height: 150px;
  }
</style>
